<template>
  <transition name="slide-fade">
    <div 
      v-if="cartVisible"
      class="fixed inset-y-0 right-0 z-50 w-full max-w-md bg-white shadow-xl overflow-y-auto"
    >
      <div class="p-6">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-gray-800">购物车</h2>
          <button @click="toggleCart" class="text-gray-500 hover:text-gray-700 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        
        <!-- 购物车为空 -->
        <div v-if="cartItems.length === 0" class="text-center py-12">
          <div class="mx-auto mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <p class="text-gray-500 mb-4">购物车是空的</p>
          <button 
            @click="toggleCart"
            class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition shadow"
          >
            继续购物
          </button>
        </div>
        
        <!-- 购物车列表 -->
        <div v-else>
          <div v-for="item in cartItems" :key="item.id" class="flex items-center py-4 border-b">
            <img :src="item.image" alt="" class="w-16 h-16 object-cover rounded-lg">
            
            <div class="ml-4 flex-1">
              <h3 class="font-medium text-gray-800">{{ item.name }}</h3>
              <p class="text-red-500 font-bold">¥{{ item.price }}</p>
            </div>
            
            <div class="flex items-center">
              <button 
                @click="updateQuantity(item.id, item.quantity - 1)"
                class="w-8 h-8 flex items-center justify-center border border-gray-300 rounded-l hover:bg-gray-100 transition"
              >
                -
              </button>
              <input 
                type="number" 
                min="1"
                v-model.number="item.quantity" 
                @change="updateQuantity(item.id, item.quantity)"
                class="w-12 h-8 text-center border-t border-b border-gray-300 outline-none"
              >
              <button 
                @click="updateQuantity(item.id, item.quantity + 1)"
                class="w-8 h-8 flex items-center justify-center border border-gray-300 rounded-r hover:bg-gray-100 transition"
              >
                +
              </button>
              
              <button 
                @click="removeFromCart(item.id)"
                class="ml-4 text-gray-500 hover:text-red-500 transition"
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </div>
          </div>
          
          <div class="mt-8 pt-4 border-t border-gray-200">
            <div class="flex justify-between py-4 text-lg font-bold text-gray-800">
              <span>商品总计:</span>
              <span>¥{{ totalPrice }}</span>
            </div>
            
            <div class="flex justify-between py-2 text-sm text-gray-600">
              <span>运费:</span>
              <span>¥0.00</span>
            </div>
            
            <div class="flex justify-between py-4 text-xl font-bold text-gray-800 border-t border-gray-200 mt-4">
              <span>应付总额:</span>
              <span>¥{{ totalPrice }}</span>
            </div>
            
            <button 
              class="w-full py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition font-medium shadow-lg mt-6"
            >
              结算 ({{ totalItems }}件商品)
            </button>
          </div>
        </div>
      </div>
    </div>
  </transition>
  
  <!-- 背景遮罩 -->
  <transition name="fade">
    <div 
      v-if="cartVisible"
      class="fixed inset-0 bg-black bg-opacity-50 z-40"
      @click="toggleCart"
    ></div>
  </transition>
</template>

<script setup lang="ts">
import { useCart } from '../composables/useCart';

const { 
  cartVisible, 
  cartItems, 
  removeFromCart, 
  updateQuantity, 
  totalPrice, 
  totalItems,
  toggleCart 
} = useCart();
</script>

<style scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>